# 使用官方的Node.js镜像作为构建环境
FROM node:20 AS build-env

# 设置工作目录 有cd app的效果
WORKDIR /app

# 拷贝package.json和package-lock.json文件 到当前工作目录下
COPY package*.json ./

# 配置NPM镜像源  淘宝镜像
RUN npm config set registry https://registry.npmmirror.com

# 下载安装依赖
RUN npm install

# 拷贝源代码 将当前目录下的所有文件 复制到镜像的工作目录下
COPY . .

# 构建Vue应用  生成/dist/
RUN npm run build

# 使用官方的Nginx镜像作为运行环境
FROM nginx:alpine

# 删除默认的Nginx配置文件
RUN rm -rf /etc/nginx/conf.d/default.conf

# 拷贝构建好的Vue应用到Nginx的html目录
COPY --from=build-env /app/dist /usr/share/nginx/html

# 拷贝自定义的Nginx配置文件
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露80端口
EXPOSE 80

# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]